<template>
  <!-- 抖音商品详情 -->
  <div class="p-2" v-loading="loading">
    <div class="mb-[10px]">
      <el-card>
        <template v-slot:header>
          <el-button plain icon="Back" @click="close" style="border: none; font-size: 18px;">关 闭</el-button>
        </template>
        <el-row style="padding: 0 20px;">
          <el-col :span="6">
            <el-carousel ref="slideshowRef" trigger="click" indicator-position="none" height="404px"
              style="margin-top: 20px;">
              <el-carousel-item v-for="item in imagesList" :key="item" style="background-color: #fff;">
                <el-image style="width: 100%; height: 404px;"
                  :src="item " fit="contain" />
              </el-carousel-item>
            </el-carousel>
            <el-row>
              <el-scrollbar>
                <div class="scrollbar-flex-content">
                  <el-image v-for="(item, index) in imagesList" :key="item" class="scrollbar-demo-item"
                    :src="item " fit="contain"
                    @click="slideshowClick(index)" />
                </div>
              </el-scrollbar>
            </el-row>
          </el-col>
          <el-col :span="2">
            <div style=" width: 30%; height: 100%; border-right: 1px solid #dddddd;"></div>
          </el-col>
          <el-col :span="15">
            <el-row style="margin-top: 20px;">
              <el-col :span="13" class="sin-line">
                <el-tooltip content="复制商品名" placement="top">
                  <el-button link icon="CopyDocument" class="iconSty" @click="copyText(form.name)"></el-button>
                </el-tooltip>
                <el-tooltip :content="form.name" placement="top">
                  <span class="lioneuos">{{ form.name }}</span>
                </el-tooltip>
              </el-col>
              <el-col :span="10" :offset="1" class="sin-line">
                <el-tooltip content="复制供货商" placement="top">
                  <el-button link icon="Shop" class="iconSty" @click="copyText(form.supplierName)"></el-button>
                </el-tooltip>
                <el-tooltip :content="form.supplierName" placement="top">
                  <span class="lioneuos">{{ form.supplierName }}</span>
                </el-tooltip>
              </el-col>
            </el-row>
            <el-row class="goodsCard" justify="space-evenly">
              <el-col :span="6" class="lioneuos">
                <div>
                  <span class="text_label">售价</span>：
                  <span style="font-size: 24px; font-weight: 700; color: #fa6b7e;">￥{{ form.price
                  }}</span>&thinsp;
                  <span style="text-decoration: line-through #fa6b7e; ">￥{{ form.marketPrice }}</span>
                </div>
                <div>
                  <span class="text_label">成本价</span>：
                  <span style="color: #fa6b7e;">￥{{ form.cost }}</span>
                </div>
                <div>
                  <span class="text_label">编号</span>：
                  <span>{{ form.sn }}</span>
                </div>
                <div>
                  <span class="text_label">位置</span>：
                  <span>{{ typeFilters(form.type) }}</span>
                </div>
                <div>
                  <span class="text_label">仓库</span>：
                  <dict-tag style="display: inline;" :options="warehose_code" :value="form.warehouseCode" />
                </div>
                <div>
                  <span class="text_label">库存</span>：
                  <span>{{ form.stock }}</span>
                </div>
                <div>
                  <span class="text_label">排序</span>：
                  <span>{{ form.sortNum }}</span>
                </div>
              </el-col>
              <el-col :span="12">
                <el-row justify="space-between">
                  <el-image style="width: 240px; height: 240px"
                    :src="form.cover " :preview-src-list="[form.cover]"
                    fit="contain" />
                  <el-image style="width: 240px; height: 240px"
                    :src="form.smallPic "
                    :preview-src-list="[form.smallPic]" fit="contain" />
                </el-row>
              </el-col>
            </el-row>
            <el-row class="statistics" justify="space-evenly">
              <el-col :span="3" align="center" style="line-height: 35px;">返佣</el-col>
              <el-col :span="3" align="center">
                <div>￥{{ form.saleRebate }}</div>
                <div>寄卖</div>
              </el-col>
              <el-col :span="3" align="center">
                <div>￥{{ form.directBuyerRebate }}</div>
                <div>买手直推</div>
              </el-col>
              <el-col :span="3" align="center">
                <div>￥{{ form.indirectBuyerRebate }}</div>
                <div>买手间推</div>
              </el-col>
              <el-col :span="3" align="center">
                <div>￥{{ form.directSellerRebate }}</div>
                <div>卖手直推</div>
              </el-col>
              <el-col :span="3" align="center">
                <div>￥{{ form.indirectSellerRebate }}</div>
                <div>卖手间推</div>
              </el-col>
            </el-row>
          </el-col>
        </el-row>
      </el-card>
    </div>
    <div class="mb-[10px]">
      <el-card>
        <el-tabs v-model="tabsName">
          <el-tab-pane v-if="introList.length !== 0" label="商品详情" name="goodsIntro">
            <div class="p-2">
              <el-card class="mb-3" shadow="never" align="center">
                <div class="demo-image__lazy">
                  <el-image v-for="url in introList" :key="url" :src="url" />
                </div>
              </el-card>
            </div>
          </el-tab-pane>
          <el-tab-pane v-if="form.composeList.length !== 0" label="组合商品" name="combination">
            <div class="p-2">
              <el-card class="mb-3" shadow="never">
                <el-table :data="form.composeList" border>
                  <el-table-column label="组合商品Sn" prop="sn" :show-overflow-tooltip="true" align="center" width="" />
                  <el-table-column label="组合商品名称" prop="name" :show-overflow-tooltip="true" align="center" width="" />
                  <el-table-column label="组合商品数量" prop="count" :show-overflow-tooltip="true" align="center" width="" />
                </el-table>
              </el-card>
            </div>
          </el-tab-pane>
        </el-tabs>
      </el-card>
    </div>
  </div>
</template>

<script setup lang="ts" name="DetailsGoods">
import { SupVO } from '@/api/system/supplier/types';
import { getGoods } from '@/api/operates/goods/index';
import { GoodsQuery, GoodsForm } from '@/api/operates/goods/types';
import { copyText } from '@/utils/copyText';

const router = useRouter();

const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const { warehose_code } = toRefs<any>(proxy?.useDict('warehose_code'));

const props = defineProps({
  id: {}
});

const loading = ref(true)
const slideshowRef = ref<any>()
// 详情图 
const introList = ref<any>([])
// 轮播图
const imagesList = ref<any>([])

const tabsName = ref('goodsIntro')

const initForm: GoodsForm = {
  sn: '',
  type: '',
  name: '',
  supplierName: '',
  intro: '',
  cover: '',
  smallPic: '',
  images: '',
  warehouseCode: '',
  composeList: []
}

const data = reactive<PageData<GoodsForm, GoodsQuery>>({
  form: { ...initForm },
  queryParams: {
    name: '',
    sn: '',
    compose: 0,
    pageNum: 1,
    pageSize: 10,
  },
  rules: {}
})
const { form, queryParams, rules } = toRefs(data)

/**
 * 获取轮播图和详情图
 */
const getGoodsInfo = async () => {
  if (props.id) {
    loading.value = true;
    const { data } = await getGoods(props.id as string | number)
    form.value = data
    introList.value = form.value.intro.split(",")
    imagesList.value = form.value.images.split(",")
    loading.value = false;
  }
}

/**
 * 轮播图点击切换
 * @param index 
 */
const slideshowClick = (index: number) => {
  slideshowRef.value?.setActiveItem(index)
}

const typeFilters = (val: string) => {
  if (val === 'WHOLESALE') {
    return '批发区'
  } else if (val === 'CONSIGN') {
    return '寄卖区'
  }
}

/**
 * 关闭
 */
const close = () => {
  proxy?.$tab.closeOpenPage();
  router.push({ name: "Goods" });
}

watch(
  () => props.id,
  (val, old) => {
    getGoodsInfo()
  },
  // { immediate: true }
)

onMounted(() => {
  getGoodsInfo()
});

// defineExpose({
//   getGoodsInfo
// });
</script>

<style scoped>
/* 滚动条 */
.scrollbar-flex-content {
  display: flex;
  margin-top: 30px;
}

.scrollbar-demo-item {
  flex-shrink: 0;
  height: 100px;
  margin: 0 10px 15px 0;
  text-align: center;
}

/* 文本样式 */
.lioneuos {
  line-height: 35px;
  font-family: 楷体;
  font-size: 20px;
}

/* 商品和店铺名前图标 */
.iconSty {
  font-size: 18px;
  padding-bottom: 5px;
}

/* 商品卡片 */
.goodsCard {
  width: 100%;
  margin-top: 40px;
  padding: 40px 0;
  background-color: #f7f8fc;
  border-radius: 30px;
}

/* 数据统计 */
.statistics {
  width: 100%;
  margin-top: 50px;
  padding-bottom: 20px;
  font-family: 楷体;
  font-size: 20px;
  border-bottom: 1px solid #dddddd;
}

/* 商品详情文本 */
.text_label {
  display: inline-block;
  width: 60px;
  vertical-align: top;
  text-align-last: justify;
}

.text_value {
  display: inline-block;
  width: 75%;
}

/* 商品详情图 */
.demo-image__lazy .el-image {
  display: block;
  width: 60%;
}

/* 创意灵感 */
.clearfix {
  font-size: 17px;
  font-weight: 600;
}

.clearfix_card {
  height: 113px;
  margin: 10px 0;
  padding: 15px;
  background-color: #f9f9f9;
  border-radius: 10px;
}

/* 单行省略 */
.sin-line {
  /* 第一步：让文字强制一行显示 */
  white-space: nowrap;
  /* 第二步：溢出隐藏 */
  overflow: hidden;
  /* 第三步：溢出的内容省略号显示 */
  text-overflow: ellipsis;
}

/* 多行省略 */
.mu-row {
  /* 允许单词内换行 */
  word-break: break-all;
  overflow: hidden;
  text-overflow: ellipsis;
  /* 开启盒子的弹性布局 */
  display: -webkit-box;
  /* 控制第几行出现省略号 */
  -webkit-line-clamp: 3;
  /* 设置子元素从上向下垂直排列 */
  -webkit-box-orient: vertical;
}
</style>